<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-body">
        <form class="form-inline">
          <div class="box box-default">
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;">
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-chqfwltm')" type="button" class="btn btn-primary" (click)="showModal('1')"
                style="margin-bottom:8px;">
                <i class="fa fa-edit"></i>抽取服务类条目</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-fwtmshh')" type="button" class="btn btn-primary" (click)="showModal('2')"
                style="margin-bottom:8px;">
                <i class="fa fa-edit"></i>服务条目审核</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-chqhsltm')" type="button" class="btn btn-primary" (click)="showModal('3')"
                style="margin-bottom:8px;">
                <i class="fa fa-edit"></i>抽取核算类条目</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-htfwtmchx')" type="button" class="btn btn-primary" (click)="showModal('4')"
                style="margin-bottom:8px;">
                <i class="fa fa-search"></i>合同服务条目查询</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-hthstmchx')" type="button" class="btn btn-primary" (click)="showModal('5')"
                style="margin-bottom:8px;">
                <i class="fa fa-search"></i>合同核算条目查询</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-chxfwshh')" type="button" class="btn btn-primary" (click)="revokeServiceCheck()"
                style="margin-bottom:8px;">
                <i class="fa fa-undo"></i>撤销服务审核</button>
              <button *ngIf="_.includes(menuResourceSet,'btn-entry-export')" class="btn btn-primary" (click)="exportExcel()" style="margin-bottom:8px;">
                <i class="fa fa-sign-out"></i>导出Excel</button>
              <button class="btn btn-box-tool pull-right" type="button" data-widget="collapse" style="margin-bottom:8px;">
                <i class="fa fa-minus"></i>
              </button>
            </div>
            <div class="box-body">
              <div class="form-group col-lg-12" style="padding-left:0px !important;">
                <label>产品代码：</label>
                <input class="form-control" [(ngModel)]="getExtractPost.sFundCode" name="sFundCode" placeholder="产品代码">
                <label>产品名称：</label>
                <input class="form-control" [(ngModel)]="getExtractPost.sFullName" name="sFullName" placeholder="产品名称">
                <button class="btn btn-primary" (click)="getExtractList(1)">
                  <i class="fa fa-search"></i>查询</button>
              </div>
            </div>
          </div>
        </form>

        <div class="box-body" style="padding-left:0px;padding-right:0px;">
          <div style="overflow-x:scroll;width:100%">
            <table id="fixed-table" class="table table-bordered table-hover table-keep-line table-striped" style="margin-top:unset !important;">
              <thead>
                <tr>
                  <th class="width-5">
                    <div class="checkbox checkbox-primary">
                      <input type="checkbox" [(ngModel)]="isCheckedAll" (ngModelChange)="extractCheckedAll()">
                      <label>
                    </label>
                    </div>
                  </th>
                  <th class="width-10" (click)="orderData('sFundCode')">产品代码<i class="fa fa-sort"></i></th>
                  <th class="width-15" (click)="orderData('sFullName')">产品名称<i class="fa fa-sort"></i></th>
                  <th class="width-15" (click)="orderData('sFundTypeZh')">产品类型<i class="fa fa-sort"></i></th>
                  <th class="width-15" (click)="orderData('sStatusZh')">运作状态<i class="fa fa-sort"></i></th>
                  <th class="width-15" (click)="orderData('sServiceItem')">服务条目<i class="fa fa-sort"></i></th>
                  <th class="width-10" (click)="orderData('sAccountItem')">核算条目<i class="fa fa-sort"></i></th>
                  <th class="width-15" (click)="orderData('dEnd')">到期日<i class="fa fa-sort"></i></th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let item of extractList">
                  <td class="width-5">
                    <div class="checkbox checkbox-primary">
                      <input type="checkbox" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlExtractCheckAll()">
                      <label>
                    </label>
                    </div>
                  </td>
                  <td class="width-10 short_name" [attr.title]="item.sFundCode">{{item.sFundCode}}</td>
                  <td class="width-15 short_name" [attr.title]="item.sFullName">{{item.sFullName}}</td>
                  <td class="width-15 short_name" [attr.title]="item.sFundTypeZh">{{item.sFundTypeZh}}</td>
                  <td class="width-15 short_name" [attr.title]="item.sStatusZh">{{item.sStatusZh}}
                    <!-- <span *ngIf="item.sStatusRunning == '0'">暂停</span>
                  <span *ngIf="item.sStatusRunning == '1'">运行</span>
                  <span *ngIf="item.sStatusRunning == '3'">删除</span> -->
                  </td>
                  <td class="width-15 short_name">
                    <span *ngIf="item.sServiceItem == '0'" [attr.title]="'未抽取'">未抽取</span>
                    <span *ngIf="item.sServiceItem == '1'" [attr.title]="'待审核'">待审核</span>
                    <span *ngIf="item.sServiceItem == '2'" [attr.title]="'审核通过'">审核通过</span>
                    <span *ngIf="item.sServiceItem == '3'" [attr.title]="'审核不通过'">审核不通过</span>
                  </td>
                  <td class="width-10 short_name" [attr.title]="item.sAccountItem">
                    <span *ngIf="item.sAccountItem == '0'" [attr.title]="'未抽取'">未抽取</span>
                    <span *ngIf="item.sAccountItem == '1'" [attr.title]="'已抽取'">已抽取</span>
                  </td>
                  <td class="width-15 short_name" [attr.title]="item.dEnd">{{item.dEnd}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="box-footer clearfix">
          <app-pagination [currentPageNum]="extractPageInfo.currentPageNum" [pagesShow]="" [totalPages]="extractPageInfo.totalPages"
            (pageChanged)="extractPageNavigation($event)">
            <div class="pull-left pagination-detail" data-pagination-additional="true">
              <span class="pagination-info">
                当前显示第{{extractPageInfo.startRow}}到第{{extractPageInfo.endRow}}条，总共{{extractPageInfo.total}}条，
              </span>
              <span class="page-list">
                每页记录
                <span class="btn-group dropup">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="page-size">{{extractPageInfo.pageSize}}</span>
              <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of extractPageInfo.pageList" role="menuitem" [class.active]="extractPageInfo.pageSize===i" (click)="extractpageSizeChange(i)">
                  <a>{{i}}</a>
                </li>
              </ul>
              </span>条
              </span>
            </div>
          </app-pagination>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 服务抽取模版 -->
<div class="modal modal-detail" id="modal1">
  <div #extractService></div>
</div>
<!-- 服务审核模版 -->
<div class="modal modal-detail" id="modal2">
  <div #serviceCheck></div>
</div>
<!-- 核算抽取模版 -->
<div class="modal modal-detail" id="modal3">
  <div #extractAccount></div>
</div>
<!-- 合同服务模版 -->
<div class="modal modal-detail" id="modal4">
  <div #contractService></div>
</div>
<!-- 合同核算模版 -->
<div class="modal modal-detail" id="modal5">
  <div #contractAccount></div>
</div>